<html>
<head>
    <meta charset="UTF-8">
    <title>使用拖拽更改支付宝的默认付款方式</title>
    <script type="text/javascript" src="../jquery-1.7.1.min.js"></script>
    <style type="text/css">
        .main{
            width:400px;
            margin: 0 auto;
            text-align: center;
            background-color: #cccccc;
            box-sizing: border-box;
        }
        h3{
            padding-top: 10px;
            font-size: 16px;
            font-weight: normal;
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
        ul{
            width: 300px;
            padding: 10px 0;
            margin: 0px auto;
        }
        li{
            border:1px dashed grey;
            list-style-type: none;
        }
    </style>
</head>
<body>
<div class="main">
    <h3>使用拖拽更改支付宝的默认付款方式</h3>
    <ul id="card">
        <li draggable="true">招商信用卡</li>
        <li draggable="true" >交通信用卡</li>
        <li draggable="true" >中信储蓄卡</li>
        <li draggable="true">建行储蓄卡</li>
        <li draggable="true">蚂蚁花呗</li>
        <li draggable="true">余额宝</li>
        <li draggable="true">余额</li>
    </ul>
</div>
<script>
    (function($){
        var dragSrc;
        $('li').each(function (index,ele) {
            ele.ondragstart =function (e) {
                dragSrc = this;
                e.dataTransfer.setData('text/html',this.innerHTML)
            };
            ele.ondragover = function (e) {
                e.preventDefault()
            };
            ele.ondrop = function (e) {
                if(dragSrc != this){
                    dragSrc.innerHTML = this.innerHTML;
                    this.innerHTML = e.dataTransfer.getData('text/html')
                }
            }
        })
    })(jQuery)
</script>
</body>
</html>